<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户组列表</title>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css">
    <link rel="stylesheet" href="__PUBLIC__/admin/css/admin.css">
</head>
<body style="padding:10px;">
    <blockquote class="layui-elem-quote">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" style="width: 300px;" name="keywords" placeholder="请输入用户组中文名称查询" class="layui-input">
            </div>
            <button class="layui-btn" id="search_btn">查询</button>
        </div>
        <div class="layui-inline">
            <a href="javascript:;" id="add" class="layui-btn layui-btn-normal">添加用户组</a>
        </div>
        <div class="layui-inline">
            <div class="layui-word-aux">支持模糊查询</div>
        </div>
        <div class="layui-inline" id="search_info"></div>
    </blockquote>
    <table class="layui-hide" id="test" lay-filter="testfilter"></table>
    <script type="text/html" id="statusTpl">
        {{#  if(d.status == 1){ }}
            <span style="color: #009688;">通过</span>
        {{#  } else { }}
            <span style="color: #FF5722;">不通过</span>
        {{#  } }}
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</body>
<script type="text/javascript" src="__PUBLIC__/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['jquery','layer','table','form'],function(){
        var $ = layui.jquery,
            table = layui.table,
            form = layui.form,
            layer = layui.layer;

        table.render({
            elem: '#test',
            url:'{:U("Admin/Api/getAuthGroupList")}',
            cellMinWidth: 80,
            cols: [[
                {type: 'checkbox'},
                {field:'id', title: 'ID',width:60, sort: true},
                {field:'title', title: '用户组中文名称',align:'left'},
                {field:'status', title: '状态',width:80,templet: '#statusTpl'},
                {fixed: 'right',title: '操作',width:120,align:'center', toolbar: '#barDemo'}
            ]],
            page: true
        });
        table.on('tool(testfilter)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent === 'edit'){
                var index = layer.open({
                    type: 2,
                    title:'修改用户组',
                    content:"{:U('Admin/AuthGroup/edit')}?id="+data.id
                });
                layer.full(index);
            }
            if(layEvent === 'del'){
                layer.confirm('确定执行删除操作吗（不可撤销）?',{icon: 3, title:'提示'}, 
                    function(index){
                        var index = layer.load(1);
                        $.ajax({
                            url: "{:U('Admin/AuthGroup/del')}",
                            type:'POST',
                            data: {'id':data.id},
                            dataType:'json',
                            success:function(data){
                                if( data.status != 1 ){
                                    layer.msg(data.msg,{icon:5});
                                    return false;
                                }
                                layer.msg(data.msg,{icon:6});
                                setTimeout(function(){
                                    location.reload()
                                },1000);
                            },
                            error:function(){
                                layer.msg("ERROR",{icon:5});
                                setTimeout(function(){
                                    location.reload()
                                },1000);
                            }
                        });
                    },
                    function(index){
                        layer.close(index);
                    }
                );
            }
        });
        $("#add").on('click',function(){
            var index = layer.open({
                type: 2,
                title:'添加用户组',
                content:"{:U('Admin/AuthGroup/add')}"
            });
            layer.full(index);
        });
        //搜索
        $("#search_btn").on("click",function(){
            var keywords = $("input[name='keywords']").val();
            table.reload('test', {
                url: '{:U("Admin/Api/getAuthGroupList")}',
                where: {
                    'keywords':keywords
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                done:function(res, curr, count){
                    var html = '搜索关键字【<span style="color:#FF5722;">'+keywords+'</span>】结果如下';
                    $("#search_info").empty().append(html);
                    if( keywords == '' ){
                        $("#search_info").empty();
                    }
                }
            });
        });
    });
</script>
</html>